/* pages/me/index.wxss */
@import "../../styles/index.scss";
.user {
	width: 750rpx;
	height: 300rpx;

	position: relative;
	padding: 0 30rpx;
	box-sizing: border-box;
  @include flex;
  &-bg{
    z-index: -1;
    position: absolute;
    left: 0;
    width: 750rpx;
    height: 300rpx;
    box-sizing: border-box;
    background-color: #FF004C;
  }
	&-cover {
		padding: 0 40rpx;
		@include flex;
		.img {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
	}
	&-content {
		flex: 1;
		line-height: 36rpx;
		.name {
			font-size: 32rpx;
			color: #fff;
		}
		.phone {
			font-size: 24rpx;
			color: #FFFFFF80;
		}
	}
	&-qrcode {
		@include flex;
		padding-right: 30rpx;
		.qrcode {
			width: 38rpx;
			height: 38rpx;
		}
		.arrow {
			margin-left: 20rpx;
		}
	}
}
.list {
	background-color: #fff;
	width: 701rpx;
	height: 1030rpx;
	background-color: #fff;
	margin: 0 auto;
	transform: translateY(-50rpx);
	.title {
		font-size: 28rpx;
		color: #000;
		line-height: 38rpx;
		padding: 50rpx 22rpx;
	}
	.nav {
		@include flex-center;
		padding-bottom: 30rpx;
		&-item {
			width: 170rpx;
			padding: 20rpx 0;
			@include flex-column-center;
			.img {
				width: 64rpx;
				height: 64rpx;
			}
			.name {
				font-size: 20rpx;
				color: #000;
				line-height: 26rpx;
        margin-top: 12rpx;
        text-align: center;
			}
		}
		.gutter {
			width: 2rpx;
			height: 76rpx;
			background-color: #C5C5C5;
		}
	}
	.row {
		padding: 0 14rpx;
		@include flex;
		.col {
			flex: 1;
			height: 100rpx;
			position: relative;
			box-sizing: border-box;
			padding-right: 20rpx;
			@include flex;
			.name {
				flex: 1;
			}
			.value {
				font-size: 28rpx;
				color: #8F8F8F;
				padding-right: 14rpx;
			}
			.top,
			.bottom {
				position: absolute;
        background-color: #000;
			}
			.top,
			.bottom {
				width: 100%;
				height: 2rpx;
				left: 0;
			}
			.top {
				top: 0;
			}
			.bottom {
				bottom: -1rpx;
			}
		}
		.gutter {
			width: 2rpx;
			height: 82rpx;
			background-color: #000;
			margin: 0 20rpx;
		}
	}
}
